@section('title', '{##模型名称##}编辑')
@section('id', $id)
@section('content')

<style type="text/css">
    .layui-form-label {
        width: 100px;
    }

    .layui-input-block {
        margin-left: 130px;
    }

    .treeSelect .layui-select-title span {
        line-height: 38px;
    }

    .layui-form-select dl {
        padding: 0;
    }

    .page_title{ font-size: 18px; font-weight: bold; padding-left:20px; margin-bottom: 20px; }
</style>


<div class="layui-tab" lay-filter="tabDemo">

    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="1">基本信息</li>
        <li lay-id="2">图片上传</li>
        <li lay-id="3">SEO信息</li>
        {##扩展TAB##}
    </ul>

    <div class="layui-tab-content ">
        <div class="layui-tab-item layui-show">
            <div class="layui-form-item">
                <label class="layui-form-label">所属栏目：</label>
                <div class="layui-input-block" style="width: 300px;">
                    <div class="layui-unselect layui-form-select treeSelect">
                        <div class="layui-select-title">
                            <span class="layui-input layui-unselect" id="treeclass">选择栏目</span>
                            <input type="hidden" name="class_id" value="0" >
                            <i class="layui-edge"></i>
                        </div>
                        <dl class="layui-anim layui-anim-upbit">
                            <dd>
                                <ul id="meuntree"></ul>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label layui-required">标题：</label>
                <div class="layui-input-block">
                    <input type="text" value="{$info.title ?? ''}" name="title" required lay-verify="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">副标题：</label>
                <div class="layui-input-block">
                    <input type="text" value="{$info.alias ?? ''}" name="alias" placeholder="请输入副标题"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">摘要：</label>
                <div class="layui-input-block">
                    <textarea name="intro" placeholder="请输入摘要" class="layui-textarea">{$info.intro ?? ''}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">标签：</label>
                <div class="layui-input-block">
                    <input type="text" value="{$info.tags ?? ''}" name="tags" placeholder="请输入标签,多个标签用｜隔开" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">内容属性：</label>
                <div class="layui-input-block">
                    <input type="checkbox" {if(isset($info['state']) && $info['state'] == 1)}checked{/if} name="state" value="1" title="审核">
                    <input type="checkbox" {if(isset($info['is_top']) && $info['is_top'] == 1)}checked{/if} name="is_top" value="1" title="置顶">
                    <input type="checkbox" {if(isset($info['is_recommend']) && $info['is_recommend'] == 1)}checked{/if} name="is_recommend" value="1" title="推荐">
                    <input type="checkbox" {if(isset($info['is_slide']) && $info['is_slide'] == 1)}checked{/if} name="is_slide" value="1" title="幻灯片">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label layui-required">内容：</label>
                <div class="layui-input-block">
                    <textarea id="container" name="content" placeholder="请输入内容" class="layui-textarea" required lay-verify="content" style="min-height:300px; padding: 0;border: none;">{$info['content'] ? htmlspecialchars($info['content']) : ''}</textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">作者：</label>
                <div class="layui-input-block">
                    <input type="text" value="{$info.author ?? ''}" name="author" placeholder="请输入作者" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">来源：</label>
                <div class="layui-input-block">
                    <input type="text" value="{$info.copyfrom ?? ''}" name="copyfrom" placeholder="请输入来源"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-tab-item">
            <div class="layui-form-item">
                <label class="layui-form-label">封面图片：</label>
                <div class="layui-input-block">
                    <div class="layui-inline">
                        <input type="text" value="{$info['cover'] ?? ''}" placeholder="请输入封面图片地址" name="cover" id="cover" class="layui-input" style="width:300px;" />
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="btnChoose">选择图片
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-warm " style="display: none;" id="btnUpload">开始上传
                        </button>
                    </div>
                    <p id="boxImgPreview" {if(! isset($info['cover']) || empty($info['cover']))} style="display: none;" {/if}><img src="{$info['cover'] ?? ''}" onclick="window.open('{$info['coverPicBig'] ?? ''}');" id="imgPreview" style="margin-top: 15px; max-height: 150px; cursor: pointer;"></p>

                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">轮播图片：</label>
                <div class="layui-input-block">
                    <div class="layui-inline">
                        <input type="text" placeholder="请输入轮播图片地址，多个以｜隔开" name="slide" id="slide" value="{$info['slide'] ?? ''}" class="layui-input" style="width: 300px;" >
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="btnSlide">选择多个图片
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm  layui-btn-warm " style="display: none;" id="btnSlideAction">开始上传
                        </button>
                    </div>
                    <ul id="slideList" class="imageList">
                        {if(! empty($info['slideList']))}
                        {foreach $info['slideList'] as $p}
                        <li><a class="img_close exist_file" data-url="{$p['url']}" href="javascript:;">x</a>
                            <img src="{$p['url']}" onclick="window.open('{$p['url']}')"/>
                            <input type="text" name="slide_remark[]" value="{$p['remark']}">
                        </li>
                        {/foreach}
                        {/if}
                    </ul>
                </div>

            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">相关附件：</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <div class="layui-inline">
                            <input type="hidden" name="attachment" id="attachment" value="" class="layui-input" style="width: 300px;">
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="btnAttachment">
                                选择多个文件
                            </button>

                            <button type="button" class="layui-btn layui-btn-warm layui-btn-sm" style="display: none;"
                                    id="btnAttachmentAction">开始上传
                            </button>
                        </div>
                        <div class="layui-inline" style="color: #FF6600">附件目前只支持上传, 这样可以显示名称及大小</div>

                        <div class="layui-upload-list" id="attachmentTable" {if(empty($info['attachmentList']))}style="display: none;"{/if}>
                        <table class="layui-table">
                            <thead>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>上传进度</th>
                            <th>操作</th>
                            </thead>
                            <tbody id="attachmentList">
                            {if(! empty($info['attachmentList']))}
                            {foreach $info['attachmentList'] as $p}
                            <tr>
                                <td><a href="{$p['url']}" target="_blank">{$p['name']} [下载]</a></td>
                                <td>{$p['size']}</td>
                                <td>已上传文件</td>
                                <td>
                                    <button class="layui-btn layui-btn-xs layui-btn-danger exist_attach" data-id="{$p['id']}">删除
                                    </button>
                                </td>
                            </tr>
                            {/foreach}
                            {/if}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="layui-tab-item">

        <div class="layui-form-item">
            <label class="layui-form-label">SEO标题：</label>
            <div class="layui-input-block">
                <input type="text" value="{$info.seo_title ?? ''}" name="seo_title" placeholder="请输入SEO标题"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">SEO关键字：</label>
            <div class="layui-input-block">
                <input type="text" value="{$info.seo_keywords ?? ''}" name="seo_keywords" placeholder="请输入SEO关键字"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">SEO描述：</label>
            <div class="layui-input-block">
                <input type="text" value="{$info.seo_description ?? ''}" name="seo_description"
                       placeholder="请输入SEO描述" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <!--扩展字段-->
    {##扩展CONTENT##}
</div>
</div>
@endsection
@section('js')
<script type="text/javascript" charset="utf-8" src="{PUBLIC_URL}/static/admin/lib/ueditor/ueditor.config.js?stime={{time()}}"></script>
<script type="text/javascript" charset="utf-8" src="{PUBLIC_URL}/static/admin/lib/ueditor/ueditor.all.min.js?stime={{time()}}"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="{PUBLIC_URL}/static/admin/lib/ueditor/lang/zh-cn/zh-cn.js?stime={{time()}}"></script>
<script>
    // 实例化编辑器
    var ue = UE.getEditor('container');
    //获取来源窗口的ID
    let sourceFrameId = '{{url('index')}}';

    layui.use(['form', 'jquery', 'laypage', 'layer', 'upload', 'element'], function () {

        var form = layui.form,
            upload = layui.upload,
            element = layui.element,
            $ = layui.jquery;
            $('#class_id').val("{$info.class_id}");
        form.render();

@include('admin.common.info_js')

        var layer = layui.layer;
        form.verify({
            class_id:  function (value){
                if(value == '' || value == 0){
                    return '请选择栏目';
                }
            },
            title: function (value){
                if(value == ''){
                    return '请输入标题';
                }
            },
            content: function (value){
                if(value == ''){
                    return '请输入内容';
                }
            }

        });
        form.on('submit(formDemo)', function (data) {

            $.ajax({
                url: "{{url('save')}}",
                data: $('form').serialize(),
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 200) {
                        layer.msg(res.message, {icon: 6});
                        parent.closeRightFrame(sourceFrameId);
                    } else {
                        layer.msg(res.message, {shift: 6, icon: 5});
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('网络失败', {time: 1000});
                }
            });
            return false;
        });
    });

</script>

<script type="text/javascript">
    layui.use(['layer', 'tree', 'form'], function () {
    var $ = layui.jquery,
        layer = layui.layer,
        form = layui.form,
        tree = layui.tree;

        tree.render({
            elem: '#meuntree'
            , data: {$treeJson}
            , id: 'authlist'
            , isJump: true //是否允许点击节点时弹出新窗口跳转
            , click: function (obj) {
                var data = obj.data;  //获取当前点击的节点数据
                //layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                var $select = $($(this)[0].elem).parents(".layui-form-select");
                $select.removeClass("layui-form-selected").find(".layui-select-title span").html(obj.data.title).end().find("input:hidden[name='parent_id']").val(obj.data.id);
            }
        });

        // 默认选中
        var checkNode = {
            id: '{$classId}'
            ,title: '{$className}'
        }
        var $select = $(".layui-form-select");
        $select.removeClass("layui-form-selected").find(".layui-select-title span").html(checkNode.title).end().find("input:hidden[name='class_id']").val(checkNode.id);
        form.render();


        $(".treeSelect").on("click", ".layui-select-title", function (e) {
            $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
            $(this).parents(".treeSelect").toggleClass("layui-form-selected");
            layui.stope(e);
        }).on("click", "dl i", function (e) {
            layui.stope(e);
        });
        $(document).on("click", function (e) {
            $(".layui-form-select").removeClass("layui-form-selected");
        });

    });
</script>
@endsection
@extends('admin.common.edit')